<template>
  <div>
    <h1 style="text-align: center; margin-bottom: 20px;">购物车</h1>
    <div v-for="product in products" :key="product.name">
      <p>{{ product.name }} - ￥{{ product.price }} - 数量：{{ cart[product.name] }}</p>
      <button @click="addToCart(product)">+</button>
      <button @click="removeFromCart(product)">-</button>
    </div>
    <p>总价 ¥{{ totalPrice }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['cart', 'products']),
    ...mapGetters(['totalPrice'])
  },
  methods: {
    ...mapMutations(['addToCart', 'removeFromCart'])
  }
}
</script>